<template>
  <div class="merchantOrderManage">
      <!-- 1. 目录位置 -->
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/order' }"
          >订单管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>订单状态</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-table
      :data="tableNewData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%"
      :cell-class-name="tableRowClassName"
      :header-cell-style="isCenter"
    >
      <el-table-column
        prop="id"
        label="订单号"
        width="140"
        align="center"
        fixed
      >
      </el-table-column>
      <el-table-column label="商品信息" width="250" fixed>
        <template slot-scope="scope">
          <div class="info_box">
            <div class="info_box_img">
              <img :src="scope.row.img" alt="" />
            </div>
            <div class="info_describe">
              <p class="text">
                <span>{{ scope.row.title }}</span>
              </p>
              <p class="attr">
                <span v-for="(itm, iid) in scope.row.goodsAttr" :key="iid">
                  <span>{{ itm.attrName }}：{{ itm.attrValue }}</span>
                </span>
              </p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价(元)" align="center" width="90">
      </el-table-column>
      <el-table-column prop="num" label="购买数量" align="center" width="80">
      </el-table-column>
      <el-table-column
        prop="total_payment"
        label="支付金额(元)"
        align="center"
        width="100"
      >
      </el-table-column>
      <el-table-column prop="name" label="用户名称" align="center" width="110">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center" width="115">
      </el-table-column>
      <el-table-column prop="address" label="用户地址" width="130">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="下单时间"
        align="center"
        width="160"
      ></el-table-column>
      <el-table-column label="订单状态" align="center" width="80">
        <template slot-scope="scope">
          <div class="tip-tag">
            <el-tag type="info" v-if="scope.row.status === 0">已取消</el-tag>
            <el-tag v-if="scope.row.status === 1">待付款</el-tag>
            <el-tag type="danger" v-if="scope.row.status === 2">待发货</el-tag>
            <el-tag type="danger" v-if="scope.row.status == 3">待确认</el-tag>
            <el-tag type="warning" v-if="scope.row.status == 4">退货</el-tag>
            <el-tag type="success" v-if="scope.row.status == 5">已发货</el-tag>
            <el-tag type="success" v-if="scope.row.status == 6">已付款</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      layout="total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "merchantOrderManage",
  components: {},
  data() {
    return {
      tableNewData: [],
      hoverOrderArr: [],
      OrderIndexArr: [],
      tableData: [
        {
          id: "16117282260421",
          total_payment: 3997.0,
          name: "王某某",
          phone: "18523652142",
          address: "黑龙江省 大庆市 萨尔图区 富强街道 大街13号",
          create_time: "2021-01-27 14:17:06",
          status: 1,
          list: [
            {
              price: 1999.0,
              num: 1,
              img: "https://img-tmdetail.alicdn.com/bao/uploaded///img.alicdn.com/bao/uploaded/O1CN01JmWCdR1k3fd9AWtmD_!!0-item_pic.jpg_160x160q90.jpg",
              title: "华为mate40pro 5G手机 亮黑色 8+256G全网通（碎屏险套餐）",
              goodsAttr: [
                {
                  attrName: "颜色",
                  attrValue: "亮黑色",
                },
                {
                  attrName: "运行内存",
                  attrValue: "8GB",
                },
                {
                  attrName: "机身存储",
                  attrValue: "256GB",
                },
              ],
            },
            {
              price: 999.0,
              num: 2,
              img: "https://img-tmdetail.alicdn.com/bao/uploaded///img.alicdn.com/bao/uploaded/O1CN01wfnm311k3fd483OAU_!!0-item_pic.jpg_160x160q90.jpg",
              title:
                "三星Galaxy Note20 Ultra 5G(SM-N9860)S Pen&三星笔记 120Hz自适应屏幕 5G手机游戏手机 12GB+256GB 初露白",
              goodsAttr: [
                {
                  attrName: "选择颜色",
                  attrValue: "亮黑色",
                },
                {
                  attrName: "运行内存",
                  attrValue: "8GB",
                },
                {
                  attrName: "机身存储",
                  attrValue: "512GB",
                },
              ],
            },
          ],
        },
        {
          id: "12987123",
          name: "里某某",
          total_payment: 1000.0,
          phone: "18523652182",
          address: "海南省 三沙市 中沙群岛 中沙群岛 第一座岛屿",
          create_time: "2020-04-11",
          status: 2,
          list: [
            {
              price: 1000.0,
              num: 1,
              img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi3%2F31226293%2FO1CN01mYzAtZ1wMF3dwsMBX_%21%2131226293.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663419481&t=9e12430dfbdae5844c25bdbf97351b7a",
              title:
                "2020新款复古小个子温柔风衣中款150cm外套显高显瘦学生中长款秋",
              goodsAttr: [
                {
                  attrName: "尺码",
                  attrValue: "S",
                },
                {
                  attrName: "颜色",
                  attrValue: "米色",
                },
              ],
            },
          ],
        },
      ],
      total: 2,
      currentPage: 1, //初始页
      pagesize: 10, //每页的数据
    };
  },
  mounted() {
    this.getNewTableData();
    this.getOrderNumber();
  },

  methods: {
    // 初始页currentPage
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    //表格内容居中显示
    isCenter({ row, column, rowIndex, columnIndex }) {
      return "text-align:center";
    },
    // 获取相同编号的数组
    getOrderNumber() {
      let OrderObj = {};
      this.tableNewData.forEach((element, index) => {
        element.rowIndex = index;
        if (OrderObj[element.id]) {
          OrderObj[element.id].push(index);
        } else {
          OrderObj[element.id] = [];
          OrderObj[element.id].push(index);
        }
      });
      // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
      for (let k in OrderObj) {
        if (OrderObj[k].length > 1) {
          this.OrderIndexArr.push(OrderObj[k]);
        }
      }
      console.log(this.OrderIndexArr, "OrderIndexArr");
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 0 ||
        columnIndex === 4 ||
        columnIndex === 5 ||
        columnIndex === 6 ||
        columnIndex === 7 ||
        columnIndex === 8 ||
        columnIndex === 9 
      ) {
        for (let i = 0; i < this.OrderIndexArr.length; i++) {
          let element = this.OrderIndexArr[i];
          for (let j = 0; j < element.length; j++) {
            let item = element[j];
            if (rowIndex == item) {
              if (j == 0) {
                return {
                  rowspan: element.length,
                  colspan: 1,
                };
              } else if (j != 0) {
                return {
                  rowspan: 0,
                  colspan: 0,
                };
              }
            }
          }
        }
      }
    },
    tableRowClassName({ row, rowIndex }) {
      let arr = this.hoverOrderArr;
      for (let i = 0; i < arr.length; i++) {
        if (rowIndex == arr[i]) {
          return "hovered-row";
        }
      }
    },
    getNewTableData() {
      this.tableData.map((res) => {
        res.list.map((item) => {
          item.id = res.id;
          item.total_payment = res.total_payment;
          item.create_time = res.create_time;
          item.status = res.status;
          item.name = res.name;
          item.phone = res.phone;
          item.address = res.address;
        });
        this.tableNewData.push(res.list);
      });
      this.tableNewData = this.tableNewData.flat();
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
.nav {
  padding: 10px;
  margin-bottom: 10px;
}
.merchantOrderManage {
  background: #fff;
  width: 100%;
  left: 40px;
  right: 40px;
  padding: 10px;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 
  border-radius: 4px;
  .info_box {
    display: flex;
    align-items: center;
    margin: 0 10px;
    .info_box_img {
      cursor: pointer;
      width: 50px;
      flex: 0 0 50px;
      margin-right: 6px;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .info_describe {
      .text {
        margin-bottom: 6px;
      }
      .attr {
        color: #9e9e9e;
        span {
          margin-right: 6px;
        }
      }
    }
  }
}

.el-tag {
  width: 100%;
  height: 36px;
  line-height: 36px;
}
.tip-tag {
  .el-tag {
    text-align: center;
  }
}
</style>

